<template>
    <div>
     <i-input icon="search" placeholder="请输入..." style="width: 200px" @on-click="search()" v-model="searchText"></i-input>
    <Button @click="modal=true;type='create'" type="primary">增加用户</Button>
    <Button type="error" @click="confirm()">删除所选用户</Button>
    <Modal
        v-model="modal"
        title="添加新的用户"
        :mask-closable="false">
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
         <FormItem label="Name" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
         <FormItem label="Password" prop="password">
            <Input v-model="formValidate.password" placeholder="Enter your password"></Input>
            
        </FormItem>
        <FormItem label="E-mail" prop="email">
            <Input v-model="formValidate.email" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    </Modal>
    <Table stripe border :columns="columns" :data="data" @on-selection-change="addSelectData($event)"></Table>
     <Page :total="title" :current="page
     " size="small" show-elevator show-sizer @on-change="pageChange($event)" @on-page-size-change="pageSizeChange($event)" ></Page>
    </div>
</template>
<script>
import axios from "axios";
import Base from "./Base";
    export default {
        mixins:[Base],
        data () {
            return {
                module:'users',
                modal1:false,
                type:'',
                searchText:'',
                realSearchText:'',
                modal:false,
                selectData:[],
                formValidate: {
                    name: '',
                    password:'',
                    email: ''
                    },
                 ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    password:[
                         { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                 }, 
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: 'password',
                        key: 'password'
                    },
                    {
                        title: 'email',
                        key: 'email'
                    },
                    {
                        title: 'data',
                        key: 'data'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.type="change";
                                            this.modal=true;
                                            this.formValidate={...(this.data[params.index])};
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                
            }
        },
        methods:{
           
        },
        created(){
           
        }
    }
</script>
<style lang="scss">

</style>
